<template>
    <view class="container">
      <!-- 标签导航 -->
      <view class="tabs">
        <view
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['tab', { active: activeTab === index }]"
          @click="scrollToSection(index)"
        >
          {{ tab }}
        </view>
      </view>
      <!-- 使用 scroll-view 实现滚动区域 -->
      <scroll-view
        class="content"
        scroll-y
        :scroll-into-view="currentSectionId"
        :scroll-with-animation="true"
      >
        <view
          v-for="(item, index) in sections"
          :key="index"
          :id="'section' + index"
          class="section"
        >
          <view class="title">
            <i class="icon" :class="item.icon" v-if="item.icon"></i>
            {{ item.title }}
          </view>
          <view class="item" :class="index === 0 ? 'feature' : ''">
            <!-- <view v-html="contentObj[item.field]"></view>   -->
            <!-- 使用 mp-html 组件渲染富文本 -->
            <mp-html :content="contentObj[item.field]" /> 
          </view>
        </view>
      </scroll-view>
    </view>
  </template>
  
<script setup>
import { ref, onMounted, nextTick ,getCurrentInstance ,defineProps, defineEmits,watch} from 'vue';
const emit = defineEmits(['dateId']);
const props = defineProps({
  contentObj: {
        type: Object,
        required: true
      }
  });
  
  const tabs = ['特色', '行程', '费用', '须知'];
  const sections = ref([
    { title: '', field: 'feature', icon: '' },
    { title: '行程', field: 'trip', icon: 'iconfont icon-mti-huodongguiji' },
    { title: '费用', field: 'cost', icon: 'iconfont icon-feiyong' },
    { title: '须知', field: 'instructions', icon: 'iconfont icon-lipeixuzhi' },
  ]);
  // const dataList = ref({
  //   feature: '特色内容',
  //   trip: '行程内容',
  //   cost: '费用内容',
  //   instructions: '须知内容',
  // });
  
  const activeTab = ref(0);
  const currentSectionId = ref('section0');
  
  // 点击标签切换
  const scrollToSection = async (index) => {
    activeTab.value = index;
    currentSectionId.value = ''; // 清空以触发更新
    await nextTick();
    currentSectionId.value = `section${index}`;
  };
  </script>
  
  <style lang="scss" scoped>
  .container {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  
  .tabs {
    display: flex;
    justify-content: space-between;
    position: sticky;
    margin-top: 50rpx;
    top: 0;
    z-index: 8;
  }
  
  .tab {
    padding: 20rpx;
    font-size: 33rpx;
    position: relative;
    transition: all 0.3s;
    &.active {
      font-weight: bold;
      color: #1cb961;
      &::after {
        content: '';
        display: block;
        width: 50%;
        height: 5rpx;
        background: #1cb961;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
      }
    }
  }
  
  .content {
    flex: 1;
    height: 0; /* 关键：解决 flex 容器高度分配问题 */
  }
  
  .section {
    min-height: 550rpx;
    margin-bottom: 30rpx;
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .title {
    display: flex;
    align-items: center;
    font-size: 34rpx;
    font-weight: bold;
    .icon {
      font-size: 40rpx;
      color: #1cb961;
      margin-right: 10rpx;
      font-weight: normal;
    }
  }
  
  .item {
    height: 500rpx; /* 临时增大高度，测试滚动 */
    background: #ececec;
    border-radius: 10rpx;
    margin-top: 30rpx;
    &.feature {
      margin-top: 40rpx;
      background: none;
    }
  }
  </style>